<template>
    <div class="tmpl">
        <!--图片详情- 标题部分-->
			<div class="title">
				<h4>{{info.title}}</h4>
				<p>
					{{info.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}  {{info.click}}次浏览
				</p>
				<p class="line"></p>
			</div>

			<!--缩略图-->
			<div class="mui-content">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li  v-for="(item, index) in imgList" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" :key="item.src">
						<img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, imgList)">
            <!-- <vue-preview :slides="imgList"></vue-preview> -->
        	</li>
				</ul>
			</div>

			<!--图片详情- 摘要部分-->
			<p v-html="info.content"></p>
        <comment :artid = "imgid"></comment>
    </div>
</template>
<script>
import common from "../../../statics/js/common.js";
import comment from "../subcom/comment.vue";
export default {
  components: {
    comment
  },
  data() {
    return {
      imgid: this.$route.params.id,
      info: {},
      imgList: []
    }
  },
  created() {
    console.log(this);
    this.getInfo();
    this.getImgList();
  },
  methods: {
    getInfo() {
      this.$http
        .get(common.domain + "/api/getimageInfo/" + this.imgid)
        .then(re => {
          if (re.body.status != "0") {
            this.$toast(re.body.message);
            return;
          }
          this.info = re.body.message;
          console.log(this.info);
        });
    },
    getImgList() {
      this.$http
        .get(common.domain + "/api/getthumimages/" + this.imgid)
        .then(re => {
          if (re.body.status != "0") {
            this.$toast(re.body.message);
            return;
          }
          //vue-preview需要w,h和src参数，所以需要封装进去
          re.body.message.forEach(item =>{
            item.w = 600;
            item.h = 400;
          })
          this.imgList = re.body.message;
        });
    }
  }
};
</script>   
<style scoped>
.tmpl {
  padding: 10px;
}
.tmpl .title h4 {
  color: #0094ff;
}

.tmpl .title p {
  color: rgba(0, 0, 0, 0.4);
  margin-top: 10px;
}

.tmpl .title .line {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.tmpl .mui-content,
.tmpl .mui-content ul {
  background-color: #fff;
}
.tmpl .mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border-right: 0px;
  border-bottom: 0px;
}
.tmpl .mui-grid-view.mui-grid-9 {
  border-top: 0px;
  border-left: 0px;
}

/* 9宫格缩略图的样式*/
.tmpl .mui-content img {
  width: 100px;
  height: 100px;
}
</style>